<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
	<title>丽华快餐</title>
    <style type="text/css">
        body{font-family: "Helvetica Neue", "Microsoft YaHei", "SimHei";
            -webkit-touch-callout:none;-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;
            -ms-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent;}
        body,ul,li,p,h1,h2,h3,h4{margin:0;padding:0;}
        .pages{display:flex;flex-direction:column;}
        .head img{width:100%;}
        .panel{margin:10px;padding:10px;background:#FFF;border-radius:6px;color:#333;}
        .panel h4{padding-top:10px;text-align:center;}
        .eee{margin:10px;padding:10px;background:#FFF;border-radius:6px;color:#333;text-align: center;}

        /* 领取记录 */
        .logs{margin-top:0;}
        .logs ul{list-style:none;}
        .logs ul li{display:flex;justify-content:space-between;margin-top:10px;border-bottom: 1px solid #EEE;
            padding-bottom: 10px;}
        .logs ul li .user{display:flex;}
        .logs ul li .user img{width:45px;height:45px;margin-right:8px;border-radius:2px;}
        .logs ul li .user span b{color: #ff4b0a;font-size:15px;}
        .logs ul li .user span small{color:#666}
        .logs ul li .yuan{color:#ff0000;font-size:18px;font-weight:bold;font-family: Arial;}

        /* 活动规则 */
        .rules{margin-top:0;padding:10px 10px 10px 0;}
        .rules ol{padding-left:30px;}
        .rules ol li{font-size:16px;margin-bottom:5px;color: #666;}

        /* 手机登录 */
        form input{width:100%;height:50px;background:#fff;font-size:16px;padding:0;
            border:none;border-radius:6px;outline:none;text-indent:15px;border:1px solid #EEE}
        form .code{margin:10px 0;display:flex;justify-content:space-between;}
        form .code input{width:62%;}
        form button{height:50px;background:#fc9708;color:#fff;border:none;border-radius:6px;font-size:18px;outline:none}
        form .codebtn{width:35%;font-size:15px;}
        form .submit{width:100%;}

        /* 领取成功 */
        .success{display:flex;align-items: center;align-items: center;background: #FFF;margin: 10px;border-radius: 6px;}
        .success .price{
            color:#dd2523;display:flex;align-items:center;font-size:18px;
            margin-right: 15px;border-right: 3px #EEE dashed;
            padding: 0 10px;
            text-align: center;
            align-self: stretch;
            position: relative;
        }
        .success .price:before{
            content: "";
            display: block;
            position: absolute;
            right: -6px;
            bottom: -4px;
            width: 10px;
            height: 10px;
            background: #f15e5f;
            border-radius: 6px;
        }
        .success .price:after{
            content: "";
            display: block;
            position: absolute;
            right: -6px;
            top: -4px;
            width: 10px;
            height: 10px;
            background: #f15e5f;
            border-radius: 6px;
        }
        .success .price .p{font-size:26px;font-weight:bold;}
        .success .dis{
            display: flex;color: #666;flex-direction: column;
            margin: 10px 0;
            font-size:12px;
            flex-grow: 1;
        }
        .success .dis .tt{
            font-weight: bold;
            color: #333;
            font-size:14px;
        }
        .success .btn{
            background:#fc9708;color:#fff;
            padding:6px 10px;
            font-size: 13px;border-radius:6px;text-align:center;
            flex-shrink: 0;
            margin-right: 10px;

        }
        .headtitle{
            text-align: center;
            font-size: 24px;
            margin-bottom: 10px;
        }
        .btom_img{
            width: 100%;
        }
    </style>
</head>

<body>
<div class="pages">
    <div class="headtitle">{$article.name}</div>
    <div class="content">{$article.content}</div>
    <div class="buttom">
        <image src='http://newapp.lihua.com/uploads/20210920/e5f7da95aebf2e69301b8407278b70ae.png' class='btom_img' />
    </div>
</div>
<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.js"></script>
<script type="text/javascript">
    var canGetCode = true;
    var setTimeOut = null;
	var t = null;
	var downloadurl = "https://newapp.lihua.com/hongbao/index/downloadapp";
    $(function () {
        $("#loginForm").submit(function () {
            var phone = $("#phone").val();
            var code  = $("#code").val();
            if (phone && code) {
                $.post("/hongbao/index/login2", {phone: phone, code: code}, function (ret) {
                    if (ret.code === 1) window.location.reload();
                    else alert(ret.msg);
                });
            } else {
                alert("请填写手机号和验证码");
            }
            return false;
        });
        $("#getCode").click(function () {
            if (canGetCode) {
                var phone = $("#phone").val();
                if (checkPhone(phone)) {
                    timeOut();
                    getCode(phone);
                } else {
                    alert("请输入正确的手机号");
                }
            } else {
                alert("若未收到短信验证码，请稍后再试")
            }
        });
		$("#clickuse").click(function () {
			//判断当前平台
			var ua = navigator.userAgent.toLowerCase();
			var iOS = ( ua.match(/(ipad|iphone|ipod)/g) ? true : false );
			var android = ( ua.match(/android/i) ? true : false );
			// alert(iOS);
			// alert(android);
			var applink, url;
			if (iOS) {
				url = "https://www.lihua.com/newapp/"; //Universal Links
				openIOSclient(url);
			} else if (android) {
				//因为此页面肯定在微信里面所以用不了微信的scheme
				window.location = downloadurl;
			}
		})
    });
	//打开ios app软件
	function openIOSclient(url) {
		// alert(url);
		var ifr = document.createElement('iframe');
		ifr.src = url;
		ifr.style.display = 'none';
		document.body.appendChild(ifr);
		clearTimeout(t);
		t = setTimeout(function() {
			// alert(downloadurl);
		    window.location = downloadurl;
		}, 2000);
		window.onblur = function() {
		    clearTimeout(t);
		}
	}

    //倒计时
    function timeOut() {
        $("#getCode").text("60秒");
        var time = 60;
        setTimeOut = setInterval(function () {
            time--;
            $("#getCode").text(time + "秒");
            if (time === 0) {
                $("#getCode").text("获取验证码");
                canGetCode = true;
                clearInterval(setTimeOut);
            }
        }, 1000);
    }

    //获取地址栏参数
    function getQueryString(name) {
        var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");
        var r = window.location.search.substr(1).match(reg);
        if (r != null) return unescape(r[2]);
        return null;
    }

    //获取验证码
    function getCode(phone) {
        canGetCode = false;
        // $.post("https://newapp.lihua.com/api/sms/send", {mobile: phone, event: 'login'});
        $.post("http://localhost:8888/api/sms/send", {mobile: phone, event: 'login'});
    }

    //验证手机号
    function checkPhone(phone) {
        var myreg = /^[1][0-9]{10}$/;
        return myreg.test(phone);
    }
</script>
</body>
</html>